<template>
  <div class="page-newcont">
    <myHeader head-title="新增合同" goBack="true"></myHeader>
    <input type="date" v-model="contInf.landlordCardno">
    <p>房东信息</p>
    <form class="contForm">
      <section class="input_container">
        <p>姓名</p>
        <input type="text" v-model="contInf.landlordName">
      </section>
      <section class="input_container">
        <p>手机号</p>
        <input type="text" v-model="contInf.landlordPhone">
      </section>
      <section class="input_container">
        <p>入账卡号</p>
        <input type="text" v-model="contInf.landlordCardno">
      </section>
      <section class="input_container">
        <!-- <p>租房合同</p> -->
        <input type="file" accept="image/png,image/gif,image/jpeg" @change="uploadImg" >
      </section>
      <div class="promit_button" @click="submitData" v-if="inputChk>0">提交</div>
      <div class="unpromit_button" v-else>提交</div>
      <div class="promit_button" @click="wxpay">微信支付</div>
    </form>
    <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import moment from 'moment'
  import myHeader from '@/components/common/header/header'
  import alertTip from '@/components/common/alertTip'
  import env from '@/config/env'
  import {apiUploadContImg} from '@/service/apiRent'
  export default {
    data() {
      return {
        contInf: {
          "custId": "",
          "landlordName": "",
          "landlordPhone": "",
          "landlordCard": "",
          "houseAddr": "",
          "rentMons": 0,
          "rental": 0,
          "startDate": "20180424",
          "endDate": "20190424",
          "payDate": "20190624",
          "payFreq": 0,
          "img": ""
        },
        inputChk: true,    // 输入检查
        showAlert: false,   // 显示提示组件
        alertText: null     // 提示的内容
      }
    },
    mounted() {
      this.contInf.custId = this.$route.query.userId;
      console.log("custId:", this.custId);
    },
    components:{
      myHeader,
      alertTip
    },
    computed: {
      ...mapGetters([
        'storeUserRent',
        'isRetSucc',
        'retErrmsg',
        'isLoginSucc'
      ])
    },
    methods: {
      // 判断输入的电话号码
      inputPhone() {
        if(/.+/gi.test(this.phoneNumber)){
            this.rightPhoneNumber = true;
        }else{
            this.rightPhoneNumber = false;
        }
      },
      submitData() {
        console.log("storeUserRent: ", this.storeUserRent);
        this.$store.dispatch('newRentCont', this.contInf);
        console.log("storeUserRent: ", this.storeUserRent);
      },
      uploadImg(e) {
        let curTs = moment().format('MMDDHHmmss');
        let formdata = new FormData();
        let fn = this.$store.getters.user.loginName + curTs + ".jpeg";
        console.log("fn", fn);
        formdata.append('file', e.target.files[0], fn);
        console.log("formdata:", formdata.get('file'));
        apiUploadContImg(formdata).then(res => {
          let resData = res.data;
          if (resData.subCode.substring(2) === "0000") {
            console.log("resData:", resData);
            this.contInf.img = resData.bizContent.imgPath;
            console.log("img:", this.contInf.img);
          }
          else {
            this.showAlert = true;
            this.alertText = "文件上传失败";
          }
        }).catch(err => {
          console.log("err:", err);
        });
      },
      wxpay() {
        console.log("WeixinJSBridge");
        // WeixinJSBridge.invoke(
        //   'getBrandWCPayRequest', {
        //     "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
        //     "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
        //     "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
        //     "package":"prepay_id=u802345jgfjsdfgsdg888",     
        //     "signType":"MD5",         //微信签名方式：     
        //     "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
        //   }, 
        //   function(res) {     
        //    if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
        //   }
      },
      closeTip() {
        this.showAlert = false;
      }
    },
    watch: {
      'storeUserRent.httpCtlFlg': function(val, oldVal) {
        console.log("watch:httpCtlFlg:", oldVal, val);
        if (oldVal === env.HTTPCTL_SND) {
          // http返回响应
          if (this.storeUserRent.errmsg !== null) {
            this.showAlert = true;
            this.alertText = this.storeUserRent.errmsg;
            this.goBack = true;
            return;
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';

  .page-newcont{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .contForm{
    background-color: #fff;
    margin-top: .3rem;
    .input_container{
      display: flex;
      justify-content: space-between;
      padding: .6rem .3rem;
      border-bottom: 1px solid #f1f1f1;
      input {
        @include sc(.7rem, #666);
      }
      button{
          @include sc(.65rem, #fff);
          font-family: Helvetica Neue,Tahoma,Arial;
          padding: .28rem .4rem;
          border: 1px;
          border-radius: 0.15rem;
      }
      .right_phone_number{
          background-color: #4cd964;
      }
    }
    .phone_number{
        padding: .3rem .8rem;
    }
    .captcha_code_container{
        height: 2.2rem;
        .img_change_img{
            display: flex;
            align-items: center;
            img{
                @include wh(3.5rem, 1.5rem);
                margin-right: .2rem;
            }
            .change_img{
                display: flex;
                flex-direction: 'column';
                flex-wrap: wrap;
                width: 2rem;
                justify-content: center;
                p{
                    @include sc(.55rem, #666);
                }
                p:nth-of-type(2){
                    color: #3b95e9;
                    margin-top: .2rem;
                }
            }
        }
    }
  }

    .captcha_code_container{
        height: 2.2rem;
        .img_change_img{
            display: flex;
            align-items: center;
            img{
                @include wh(3.5rem, 1.5rem);
                margin-right: .2rem;
            }
            .change_img{
                display: flex;
                flex-direction: 'column';
                flex-wrap: wrap;
                width: 2rem;
                justify-content: center;
                p{
                    @include sc(.55rem, #666);
                }
                p:nth-of-type(2){
                    color: #3b95e9;
                    margin-top: .2rem;
                }
            }
        }
    }
    .login_container{
        margin: 1rem .5rem;
        @include sc(.7rem, #fff);
        background-color: #4cd964;
        padding: .5rem 0;
        border: 1px;
        border-radius: 0.15rem;
        text-align: center;
    }
  .promit_button{
    @include wh(100%, 2rem);
    @include sc(.8rem, #fff);
    border-radius: 0.15rem;
    line-height: 2rem;
    margin-top: 1rem;
    text-align: center;
    background-color: $blue;
  }
  .unpromit_button{
    @include wh(100%, 2rem);
    @include sc(.8rem, #fff);
    border-radius: 0.15rem;
    line-height: 2rem;
    margin-top: 1rem;
    text-align: center;
    background-color: $lightblue;
  }
</style>